<template>
	<view class="container">
		<view class="padding">
			<!-- 标题 -->
			<image src="https://ydh5res.onlineweixin.com/cy2/bzinfo_files/baogao-title.png" alt=""
				style="display: block; width: 508rpx;height: 67rpx; margin: 0px auto 30rpx;"></image>
			<!-- 星座运势 -->
			<!-- <image @click="toPage('/pages/report/report1?ac=xingzuo&oid=' +oid)"
        src="https://ydh5res.onlineweixin.com/cy2/bzinfo_files/baogao2new.png?v=1" alt=""
        style="display: block; width: 690rpx;height: 376rpx; margin: 0px auto 30rpx;"></image> -->
			<!-- 提运报告 -->
			<image @click="handleGetReportStatus"
				src="https://ydh5res.onlineweixin.com/cy2/bzinfo_files/baogao4.png?v=2" alt=""
				style="display: block; width: 690rpx;height: 728rpx; margin: 0px auto 30rpx;"></image>
			<!-- 易经 -->
			<!-- <image src="https://ydh5res.onlineweixin.com/cy2/bzinfo_files/baogao1.png?v=1" alt=""
        style="display: block; width: 690rpx;height: 376rpx; margin: 0px auto 30rpx;"></image> -->
			<!-- B1 1 -->
			<!-- <image src="https://ydh5res.onlineweixin.com/cy2/bzinfo_files/baogao3.png?v=1" alt="" @click="showWxInfo"
				v-if="(version === 'B1' || version==='C1') && openExtraServe === 1"
				style="display: block; width: 690rpx;height: 376rpx; margin: 0px auto 30rpx;"></image> -->
			<!-- B2 2 -->
			<!-- <image src="https://ydh5res.onlineweixin.com/cy2/bzinfo_files/baogao3n.png" alt="" @click="editInfo"
				v-if="(version === 'B1' || version==='C1') && openExtraServe === 2"
				style="display: block; width: 690rpx;height: 376rpx; margin: 0px auto 30rpx;"></image> -->
		</view>

		<view @click="copy" class="public_footer_help">
			如需帮助
			<uni-icons type="headphones" size="20" color="#fff" class="margin-lr-xs"></uni-icons>
			请联系QQ售后客服
		</view>
		<uni-popup ref="info" type="center" :is-mask-click="false">
			<view class="birth-box">
				<image src="https://yundao888.oss-cn-beijing.aliyuncs.com/cy2/bzinfo_files/daizhifu-xcx.png" alt=""
					class="bg bg1" mode="widthFix"></image>
				<view class="form-box">
					<view class="text-lg text-bold text-black margin-bottom">你的信息</view>
					<view class="margin-bottom-sm">
						<view class="flex align-center margin-bottom-sm">
							<view class="text-df text-black">你的姓名：{{ formInfo.name }}</view>
							<view class="text-df text-black margin-left-xl">性别：{{ formInfo.sex == 1 ? '男' : '女' }}
							</view>
						</view>
						<view class="text-df text-black">生日：{{ formInfo.birthdayText }}</view>
					</view>
					<view class="text-lg text-bold text-black margin-bottom">输入你的现状诉求</view>

					<image src="https://ydh5res.onlineweixin.com/cy2/index_files/luru.png" class="title-btn"
						v-show="formInfo.needExtraServe === 1 && formInfo.needExtraServeType === 0"></image>
					<view class="desc-btn-list margin-bottom-sm"
						v-show="formInfo.needExtraServe === 1 && formInfo.needExtraServeType === 0">
						<image src="https://ydh5res.onlineweixin.com/cy2/index_files/wenzi.png" class="desc-btn"
							@click="formInfo.needExtraServeType = 1">
						</image>
						<image src="https://ydh5res.onlineweixin.com/cy2/index_files/yuyin.png" class="desc-btn"
							@click="formInfo.needExtraServeType = 2"></image>
					</view>
					<view class="desc-text margin-bottom-sm"
						v-show="formInfo.needExtraServe === 1 && formInfo.needExtraServeType === 1">
						<view class="text-info">
							<image src="https://ydh5res.onlineweixin.com/cy2/index_files/back.png" class="back-btn"
								@click="formInfo.needExtraServeType = 0"></image>
							<textarea placeholder="请在此输入您的诉求" v-model="formInfo.customContent"></textarea>
						</view>
					</view>
					<view class="desc-audio margin-bottom-sm"
						v-show="formInfo.needExtraServe === 1 && formInfo.needExtraServeType === 2">
						<view class="text-info">
							<image src="https://ydh5res.onlineweixin.com/cy2/index_files/back.png" class="back-btn"
								@click="formInfo.needExtraServeType = 0"></image>
							<view class="play-audio" v-show="audioState === 2" @click="playVoice">
								<image src="https://ydh5res.onlineweixin.com/cy2/index_files/play-btn.png"
									class="audio-play"></image>
								<image v-show="playState" @click="playState = false"
									src="https://ydh5res.onlineweixin.com/cy2/index_files/bofangzhong.gif"
									class="audio-gif"></image>
								<image v-show="!playState" @click="playState = true"
									src="https://ydh5res.onlineweixin.com/cy2/index_files/bofangxian.png"
									class="audio-png"></image>
								<text id="voiceTime">{{ formInfo.voiceTime }}</text>
							</view>
							<view class="star-box" @click="startAudio" v-show="audioState === 0">
								<image src="https://ydh5res.onlineweixin.com/cy2/index_files/star-btn.png"
									class="star-btn"></image>
								<view>开始录音</view>
							</view>
							<view class="ing-box" @click="endRecord" v-show="audioState === 1">
								<image src="https://ydh5res.onlineweixin.com/cy2/index_files/luyinzhong.gif"
									class="star-btn"></image>
								<view>正在录音,点击结束录制</view>
							</view>
							<view class="end-box" @click="startAudio" v-show="audioState === 2">
								<image src="https://ydh5res.onlineweixin.com/cy2/index_files/star-btn.png"
									class="star-btn"></image>
								<view>重新录音</view>
							</view>
						</view>
					</view>

					<view class="text-lg text-bold text-black margin-bottom">你的微信号</view>

					<view class="wx-input"><input type="text" placeholder="请输入可被搜索到的微信号"
							v-model="formInfo.wechatNumber"></view>

					<view class="submit-btn" v-if="openExtraServe === 2" @click="toPay">支付
						<text id="serverMoney">0.01</text>
						元 导师服务
					</view>
					<view class="submit-btn-tips" v-if="openExtraServe === 2">支付后，请耐心等待导师联系</view>

					<view class="submit-btn" v-if="openExtraServe === 1" @click="toSubmit">提交信息</view>
					<view class="submit-btn-tips" v-if="openExtraServe === 1">提交信息后，请耐心等待导师联系</view>


				</view>
				<view class="close-btn flex align-center justify-center" @click="hideInfo">
					<image src="https://ydh5res.onlineweixin.com/cy2/index_files/close-x.png" alt=""
						style="width: 50rpx; height: 50rpx;"></image>
				</view>

			</view>
		</uni-popup>
		<uni-popup ref="wxInfo" type="center" :is-mask-click="false">
			<view class="mode-content">

				<view class="text-df text-blue text-center margin-bottom-sm">已提交，请等待导师加微信！</view>
				<view class="text-df text-blue text-center margin-bottom-sm">预计24小时内</view>
				<view class="text-df text-blue text-center ">已提交微信号：
					<text>{{ formInfo.wechatNumber }}</text>
				</view>
				<view class="close-btn" @click="hideWxInfo">
					<image src="https://ydh5res.onlineweixin.com/cy2/index_files/close-x.png" alt=""
						style="width: 50rpx; height: 50rpx;"></image>
				</view>
			</view>
		</uni-popup>

		<uni-popup ref="reportTip" type="center" :is-mask-click="false">
			<view class="mode-content">
				<!-- 提示文字 -->
				<view class="text-df text-blue text-center margin-bottom-sm">当前报告正在生成中</view>
				<view class="text-df text-blue text-center margin-bottom-sm">预计1分钟左右，请耐心等待！</view>
				<!-- 按钮 点击获取生成状态 -->
				<view class="report-tip-btn" @click="refreshReportStatus">刷新生成状态</view>
				<view class="close-btn" @click="hideReportTip">
					<image src="https://ydh5res.onlineweixin.com/cy2/index_files/close-x.png" alt=""
						style="width: 50rpx; height: 50rpx;"></image>
				</view>
			</view>
		</uni-popup>

		<view class="right-btn flex align-center justify-between flex-direction">
			<view @click="toPage('/pages/orderList/orderList')">
				<image src="https://yundao888.oss-cn-beijing.aliyuncs.com/cy2/bzinfo_files/chaxun.png" mode="widthFix"
					alt=""></image>
				<view>
					订单查询
				</view>
			</view>
			<view style="width: 30rpx;border-bottom: 2rpx solid #fff;margin: 15rpx 0;"></view>
			<view @click="toPage('/pages/msg/index')">
				<image src="https://yundao888.oss-cn-beijing.aliyuncs.com/cy2/bzinfo_files/zhuyi.png" mode="widthFix"
					alt=""></image>
				<view>
					售后客服
				</view>
			</view>
		</view>
	</view>


</template>

<script>
	import {
		confirm,
		loaded,
		loading,
		toast,
		toPage
	} from "../../tools";
	import {
		getBaZeShowData,
		getOrderInfo,
		getType,
		payOrder,
		postExtraServeData,
		submitInfo,
		getAiReportStatus
	} from "../../api";
	import {
		APPID
	} from "../../config";

	export default {
		data() {
			return {
				oid: '',
				version: '',
				formInfo: {
					name: '',
					sex: '',
					birthday: '',
					birthday2: '',
					birthdayText: '',
					needExtraServe: 1, // 1:需要 2:不需要
					needExtraServeType: 0, // 0:不选  1:文字  2:语言
					customContent: '', // 自定义内容
					voice: '', // 语音
					voiceTime: 0, // 语音时长
					wechatNumber: '', // 预留的微信号
				},
				openExtraServe: 2,
				wechatNumber: '',

				Animal: '',
				submitBirthday: {},

				audioState: 0,
				playState: false,
			};
		},
		async onLoad(options) {
			this.oid = options.oid
			// #ifdef MP-ALIPAY || MP-TOUTIAO
			const data = await getType({
				appid: APPID
			})
			if (data.status === 200) {
				this.version = data.data.version
			}
			// #endif
		},
		onShow() {
			// loading('加载中...')
			// this.recorderManager = uni.getRecorderManager();
			// this.innerAudioContext = uni.createInnerAudioContext();

			// 为了防止苹果手机静音无法播放
			// uni.setInnerAudioOption({
			//   obeyMuteSwitch: false
			// })

			// this.innerAudioContext.autoplay = true;

			// console.log("uni.getRecorderManager()", uni.getRecorderManager())
			// let self = this;
			// this.recorderManager.onStop(function(res) {
			// 	console.log("录音结束", res)
			// 	self.formInfo.voiceTime = parseInt(res.duration / 1000)
			// 	uni.uploadFile({
			// 		url: 'https://cydl.hbmingpai.com/index.php/index/index/douYinAppletUploadToOss', //仅为示例，非真实的接口地址
			// 		filePath: res.tempFilePath,
			// 		name: 'audioData',

			// 		success: (uploadFileRes) => {
			// 			console.log("uploadFileRes", uploadFileRes)
			// 			self.formInfo.voice = JSON.parse(uploadFileRes.data).data;
			// 		}
			// 	});


			// 	// self.formInfo.voice = 'https://yundao888.oss-cn-beijing.aliyuncs.com/demo/horse.mp3';
			// });
			// this.innerAudioContext.onPlay(function() {
			// 	self.playState = true
			// });
			// this.innerAudioContext.onEnded(function() {
			// 	self.playState = false
			// });
			// this.innerAudioContext.onStop(function() {
			// 	self.playState = false
			// })
			uni.getProvider({
				service: 'payment',
				success: function(res) {
					uni.setStorageSync('providerpayment', res.provider[0]);
				}
			});
			// this.getBaZeShowData()
		},

		methods: {
			toPage,
			// 关闭报告提示弹框
			hideReportTip() {
				this.$refs.reportTip.close()
			},
			// 显示报告提示弹框
			showReportTip() {
				this.$refs.reportTip.open()
			},
			// 刷新报告生成状态
			async refreshReportStatus() {
				const res = await getAiReportStatus({
					oid: this.oid
				})
				if (res.status === 200) {
					toPage('/pages/report/middle?ac=xingzuo&oid=' +this.oid)
				}else if (res.status === 800) {
					uni.showToast({
						title: res.info,
						icon: 'error'
					})
				}
			},
			// 获取报告生成的状态
			async handleGetReportStatus() {
				const res = await getAiReportStatus({
					oid: this.oid
				})
				if (res.status === 200) {
					toPage('/pages/report/middle?ac=xingzuo&oid=' +this.oid)
				}else if (res.status === 800) {
					this.$refs.reportTip.open()
				}
			},
			async getBaZeShowData() {
				const res = await getBaZeShowData({
					ac: 'getBaZeShowData',
					oid: this.oid,
				})
				this.formInfo = {
					name: res.moreData.username,
					sex: Number(res.moreData.gender),
					birthday: {
						year: JSON.parse(res.birthdayJson).yy,
						month: JSON.parse(res.birthdayJson).mm,
						day: JSON.parse(res.birthdayJson).dd,
					},
					birthday2: {
						year: JSON.parse(res.birthdayJson)._yy,
						month: JSON.parse(res.birthdayJson)._mm,
						day: JSON.parse(res.birthdayJson)._dd,
					},
					birthdayText: res.moreData.lDate,
					// birthday: res.moreData.birthdayJson,
					needExtraServe: 1, // 1:需要 2:不需要
					needExtraServeType: res.needExtraServeType ? Number(res.needExtraServeType) :
					0, // 0:不选  1:文字  2:语言
					customContent: res.customContent, // 自定义内容
					voice: res.voice, // 语音
					voiceTime: res.voiceTime, // 语音时长
					wechatNumber: res.wechatNumber, // 预留的微信号
				}
				this.submitBirthday = JSON.parse(res.birthdayJson)
				this.openExtraServe = Number(res.openExtraServe)
				this.wechatNumber = res.wechatNumber
				loaded()
			},


			async editInfo() {

				await this.getBaZeShowData()
				if (this.openExtraServe === 1 && !this.formInfo.wechatNumber) {
					await this.$refs.info.open();
				} else {
					await this.$refs.wxInfo.open();
				}

			},
			hideInfo() {
				this.$refs.info.close();
			},
			showWxInfo() {
				this.$refs.wxInfo.open();
			},
			hideWxInfo() {
				this.$refs.wxInfo.close();
				this.getOrderInfo()
			},
			copy() {

				confirm('温馨提示', '客服QQ号：1312507423 已复制，请前去咨询。', () => {
					uni.setClipboardData({
						data: '1312507423',
						success: function() {
							console.log('success');
						}
					});
				}, '确定', false)
			},
			startAudio() {
				this.formInfo.voice = ''
				this.formInfo.voiceTime = 0
				this.audioState = 1
				this.recorderManager.start({
					format: 'wav'
				});
				// this.voiceTimer = setInterval(() => {
				//   this.formInfo.voiceTime += 1
				// }, 1000)
			},
			endRecord() {
				this.audioState = 2
				// clearInterval(this.voiceTimer)
				this.recorderManager.stop()


			},
			playVoice() {
				if (!this.playState) {
					console.log(this.formInfo.voice)
					if (this.formInfo.voice) {
						this.innerAudioContext.src = this.formInfo.voice;
						this.innerAudioContext.play()
					}
				} else {
					this.playState = false
					this.innerAudioContext.stop()
				}

			},
			async toPay() {
				if (this.formInfo.needExtraServeType === 0) {
					return toast('请填写或录制问题诉求');
				}
				if (this.formInfo.needExtraServeType === 1 && !this.formInfo.customContent) {
					return toast('请填写问题诉求');
				}

				if (this.formInfo.needExtraServeType === 2 && !this.formInfo.voice) {
					return toast('请录制问题诉求');
				}

				let _dataOther = {
					oid: this.oid,
					needExtraServe: this.formInfo.needExtraServe,
					needExtraServeType: this.formInfo.needExtraServeType,
					customContent: this.formInfo.customContent,
					voice: this.formInfo.voice,
					voiceTime: this.formInfo.voiceTime,
					wechatNumber: this.formInfo.wechatNumber,
				}

				loading('保存中...')
				const res = await postExtraServeData(_dataOther)
				if (res.code === 200) {
					await this.toReport(res.oid)
				}

				//


			},

			async toReport(oid) {
				let that = this
				const res = await payOrder({
					oid,
				})
				if (res.status === 200) {
					let _data = JSON.parse(res.data)
					let that = this
					uni.requestPayment({
						provider: uni.getStorageSync('providerpayment'),
						orderInfo: _data.data,
						service: 5,
						success: (res) => {
							that.getOrderInfo(oid)
						},
						fail: (e) => {
							that.getOrderInfo()
						}
					})
				}
			},
			async getOrderInfo(oid) {
				const res = await getOrderInfo({
					oid,
				})
				if (res.data.status === 1) {
					await this.getBaZeShowData()
					this.$refs.info.close()
					this.$refs.wxInfo.open()
				} else {
					await this.getBaZeShowData()
					toast('支付失败，请重试！')
					this.$refs.info.close()
					this.$refs.wxInfo.open()
				}
			},

			async toSubmit() {
				if (this.formInfo.needExtraServeType === 0) {
					return toast('请填写或录制问题诉求');
				}
				if (this.formInfo.needExtraServeType === 1 && !this.formInfo.customContent) {
					return toast('请填写问题诉求');
				}

				if (this.formInfo.needExtraServeType === 2 && !this.formInfo.voice) {
					return toast('请录制问题诉求');
				}

				let _dataOther = {
					oid: this.oid,
					needExtraServe: this.formInfo.needExtraServe,
					needExtraServeType: this.formInfo.needExtraServeType,
					customContent: this.formInfo.customContent,
					voice: this.formInfo.voice,
					voiceTime: this.formInfo.voiceTime,
					wechatNumber: this.formInfo.wechatNumber,
				}

				loading('保存中...')
				const res = await postExtraServeData(_dataOther)
				if (res.code === 200) {
					await this.getBaZeShowData()
					this.$refs.wxInfo.open()
				}
			}
		},
		watch: {
			'formInfo.needExtraServe'() {
				if (this.formInfo.needExtraServe === 2) {
					this.formInfo.needExtraServeType = 0
					this.formInfo.customContent = ''
					this.formInfo.voice = ''
					this.formInfo.voiceTime = 0
					this.formInfo.wechatNumber = ''
					this.audioState = 0
					this.playState = false
					//  执行方法 停止录音
					//  执行方法 播放
				}
			},
			'formInfo.needExtraServeType'() {
				this.formInfo.customContent = ''
				this.formInfo.voice = ''
				this.formInfo.voiceTime = 0
				this.formInfo.wechatNumber = ''
				this.audioState = 0
				this.playState = false
				//  执行方法 停止录音
				//  执行方法 播放
			}
		}
	}
</script>

<style lang="scss">
	.container {
		width: 750rpx;
		overflow-x: hidden;

		.public_footer_help {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			padding: 30rpx;
			color: #fff;

		}

		.birth-box {
			position: absolute;
			top: 35%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 705rpx;
			height: 1108rpx;
			color: #26639d;
			font-size: 28rpx;


			.bg {
				width: 705rpx;
				height: 1108rpx;
				position: absolute;
				top: 0;
				left: 0;


			}


			.form-box {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				padding: 260rpx 80rpx 0;
				box-sizing: border-box;

				.needJh {

					width: 100%;
					height: 100rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					.title {


						font-size: 30rpx;
						margin-right: 40rpx;
					}

					.chooseSlider {
						width: 280rpx;
						height: 40rpx;
						border-radius: 30rpx;
						background: #b2c6dc;
						position: relative;

						view {
							position: absolute;
							left: 0;
							top: -10rpx;
							width: 180rpx;
							height: 60rpx;
							border-radius: 30rpx;
							border: 4rpx solid #fff;
							transition: .3s linear all;
							box-sizing: border-box;

							&.active {
								left: 100rpx;

								text {
									color: #fff;
									border: 10rpx solid #163d64;
									background: #163d64;
								}
							}

							text {
								display: flex;
								align-items: center;
								justify-content: center;
								width: 100%;
								height: 100%;
								background: #b2c6dc;
								border-radius: 30rpx;
								border: 10rpx solid #97b4d4;
								color: #fff;
								box-sizing: border-box;
							}
						}
					}
				}

				.title-btn {

					display: block;
					width: 320rpx;
					height: 45rpx;
					margin: 20rpx auto;
				}

				.desc-btn-list {

					display: flex;
					align-items: center;
					justify-content: space-between;

					.desc-btn {
						display: block;
						width: 267rpx;
						height: 116rpx;
					}
				}

				.desc-text {
					display: block;
					width: 560rpx;
					margin: 0 auto 20rpx;

					.desc-title {
						font-size: 21rpx;
						line-height: 150%;
						color: #65768b;
						text-align: center;
						margin-bottom: 20rpx;
					}

					.text-info {
						display: flex;
						align-items: flex-end;
						justify-content: space-between;
						flex-direction: column;
						width: 560rpx;
						height: 250rpx;
						padding: 20rpx;
						border-radius: 20rpx;
						background: #fff;
						box-sizing: border-box;

						.back-btn {
							display: block;
							width: 64rpx;
							height: 41rpx;
						}

						textarea {
							display: block;
							width: 100%;
							height: 160rpx;
							border: 0;
							font-size: 26rpx;
							line-height: 150%;
							color: #26639d;
							box-sizing: border-box;
						}
					}
				}

				.desc-audio {
					display: block;
					width: 560rpx;
					margin: 0 auto 20rpx;

					.desc-title {
						font-size: 21rpx;
						line-height: 150%;
						color: #65768b;
						text-align: center;
						margin-bottom: 20rpx;
					}

					.text-info {
						display: flex;
						align-items: flex-end;
						justify-content: space-between;
						flex-direction: column;
						width: 560rpx;
						height: 250rpx;
						padding: 20rpx;
						border-radius: 20rpx;
						background: #fff;
						box-sizing: border-box;

						.back-btn {
							display: block;
							width: 64rpx;
							height: 41rpx;
						}

						.play-audio {
							display: flex;
							align-items: center;
							justify-content: space-between;
							padding: 15rpx 20rpx;
							background: #26639d;
							border-radius: 10rpx;

							.audio-play {
								width: 35rpx;
								height: 35rpx;
								display: block;
								margin-right: 20rpx;
							}

							.audio-gif {
								width: 120rpx;
								height: 35rpx;
								display: block;
								margin-right: 20rpx;
							}

							.audio-png {
								width: 120rpx;
								height: 35rpx;
								display: block;
								margin-right: 20rpx;
							}

							text {
								font-size: 26rpx;
								line-height: 35rpx;
								color: #fff;
							}
						}

						.star-box {
							width: 100%;
							display: flex;
							align-items: center;
							justify-content: space-around;
							flex-direction: column;

							image {
								display: block;
								width: 100rpx;
								height: 100rpx;
								margin: 0 auto 30rpx;
							}

							view {
								font-size: 26rpx;
								line-height: 35rpx;
							}
						}

						.ing-box {
							width: 100%;
							display: flex;
							align-items: center;
							justify-content: space-around;
							flex-direction: column;

							image {

								display: block;
								width: 205rpx;
								height: 90rpx;
								margin: 0 auto 30rpx;
							}

							view {
								font-size: 26rpx;
								line-height: 35rpx;
							}
						}

						.end-box {
							width: 100%;
							display: flex;
							align-items: center;
							justify-content: space-around;
							flex-direction: column;

							image {
								display: block;
								width: 50rpx;
								height: 50rpx;
								margin: 0 auto 10rpx;
							}

							view {
								font-size: 26rpx;
								line-height: 35rpx;
							}
						}
					}
				}


				.wx-input {
					display: block;
					width: 100%;

					input {
						display: block;
						width: 100%;
						height: 80rpx;
						background: #fff;
						border-radius: 10rpx;
						border: 0;
						padding: 0 20rpx;
						font-size: 30rpx;
						box-sizing: border-box;
					}
				}

				.submit-btn {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 100%;
					height: 80rpx;
					color: #fff;
					background: #009acd;
					border-radius: 10rpx;
					border: 0;
					padding: 0 20rpx;
					font-size: 30rpx;
					margin-top: 30rpx;
					box-sizing: border-box;
				}

				.submit-btn-tips {
					font-size: 26rpx;
					text-align: center;
					line-height: 48rpx;
					width: 100%;
					color: #009acd;
				}

			}


			.close-btn {
				position: absolute;
				left: 0;
				bottom: -60rpx;
				display: flex;
				align-items: center;
				justify-content: space-around;
				width: 705rpx;
			}

		}

		.mode-content {
			width: 600rpx;
			margin: 0px auto;
			background: rgb(255, 255, 255);
			border-radius: 30rpx;
			border: 8rpx solid rgb(69, 146, 221);
			padding: 30rpx;
			box-sizing: border-box;
			position: relative;

			.close-btn {
				position: absolute;
				left: 0;
				bottom: -100rpx;
				display: flex;
				align-items: center;
				justify-content: space-around;
				width: 600rpx;
			}
			
			.report-tip-btn {
				width: 100%;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				background-color: #409eff;
				color: #fff;
				border-radius: 10rpx;
			}
			
		}
		
		.report-mode-content {
			width: 680rpx;
			margin: 0px auto;
			background: rgb(255, 255, 255);
			border-radius: 30rpx;
			border: 8rpx solid rgb(69, 146, 221);
			padding: 30rpx;
			box-sizing: border-box;
			position: relative;
		
			.close-btn {
				position: absolute;
				right: 10rpx;
				top: 10rpx;
				display: flex;
				align-items: center;
				justify-content: space-around;
				width: 40rpx;
				height: 40rpx;
				border-radius: 100%;
				text-align: center;
				line-height: 40rpx;
			}
		}
		

		.right-btn {
			position: fixed;
			right: 0;
			top: 10vh;
			background: rgba(0, 0, 0, .5);
			padding: 10rpx;
			border-radius: 10rpx 0 0 10rpx;

			image {
				width: 40rpx;
				height: 40rpx;
			}

			view {
				width: 40rpx;
				color: #fff;
				text-align: center;
				font-size: 28rpx;
			}
		}
	}
</style>